<%-- 
    Document   : facturas
    Created on : 08-24-2012, 09:19:27 AM
    Author     : marco.castro
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<html>

    <head>
			<link href="../resources/css.css" rel="stylesheet" type="text/css" />
			<script type="text/javascript" src="../resources/calendario/calendar.js"></script>
			<script type="text/javascript" src="../resources/calendario/calendar-setup.js"></script>
			<script type="text/javascript" src="../resources/calendario/calendar-es.js"></script>
			<style type="text/css"> @import url("../resources/calendario/calendar-system.css"); </style>
			<link rel="stylesheet" href="../resources/style.css" />
			<script type="text/javascript" src="../resources/javascript/tinybox.js"></script>
				
			
			
			<!-- se agregan librerias para el form Wizard -->
			<script type="text/javascript" src="../resources/js/jquery-1.4.2.min.js"></script>		
		    <script type="text/javascript" src="../resources/js/jquery.form.js"></script>
		    <script type="text/javascript" src="../resources/javascript/jquery.validate.js"></script>
		    <script type="text/javascript" src="../resources/js/bbq.js"></script>
		    <script type="text/javascript" src="../resources/js/jquery-ui-1.8.5.custom.min.js"></script>
		    <script type="text/javascript" src="../resources/js/jquery.form.wizard.js"></script>
			<link rel="stylesheet" type="text/css" href="../resources/css/ui-lightness/jquery-ui-1.8.2.custom.css" />  


<link rel="stylesheet" type="text/css" media="screen" href="../resources/cmxform.css" />
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#demoWrapper {
				padding : 1em;
				width : 500px;
				border-style: solid;
			}

			#fieldWrapper {
			}

			#demoNavigation {
				margin-top : 0.5em;
				margin-right : 1em;
				text-align: right;
			}
			
			#data {
				font-size : 0.7em;
			}

			input {
				margin-right: 0.1em;
				margin-bottom: 0.5em;
			}

			.input_field_25em {
				color: red;
				width: 2.5em;
			}

			.input_field_3em {
				width: 3em;
			}

			.input_field_35em {
				width: 3.5em;
			}

			.input_field_12em {
				width: 12em;
			}

			label {
				margin-bottom: 0.2em;
				font-weight: bold;
				font-size: 0.8em;
			}

			label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}

			.step span {
				float: right;
				font-weight: bold;
				padding-right: 0.8em;
			}

			.navigation_button {
				width : 80px;
			}
			
			#data {
					overflow : auto;
			}

</style>

	
    <title>Turn plain webform into a powerful wizard with jQuery</title>
    
    <script type="text/javascript">
    
    $(document).ready(function() {
       var tipoAccion = "${tipoAccion}";
       if(tipoAccion == 1){
    	   
   		editForm('ingresoEmp','modificarPersonal');
   		
	$(function(){
		$("#ingresoEmp").formwizard({ 
			formPluginEnabled: true,
		 	historyEnabled : true,
		 	validationEnabled: true,
		 	focusFirstInput : true,
		 	formOptions :{
		 		
				beforeSubmit: function(data){$("#data").html("Registro Ingresado Exitosamente " + $.param(data));},
				success: function(data){window.location.href = "${pageContext.request.contextPath}/admin/showPersonal"; },				
				
		 	},
		 	disableUIStyles : true	
		 }
		);
	});
       }
       else{
    	   
		$(function(){
			$("#ingresoEmp").formwizard({ 
				formPluginEnabled: true,
			 	historyEnabled : true,
			 	validationEnabled: true,
			 	focusFirstInput : true,
			 	formOptions :{
			 		
					beforeSubmit: function(data){$("#data").html("Registro Ingresado Exitosamente " + $.param(data));},
					success: function(data){window.location.href = "${pageContext.request.contextPath}/admin/showPersonal"; },				
					
			 	},
			 	disableUIStyles : true	
			 }
			);
		});
       }
    });
    function showEditBtn(){
    	$(".btnEditar").hide("fast");
    	$(".btnAgregar").hide("slow");
    	$(".btnEditar").show("slow");
    	
    }

    function hiddenEditBtn(){
    	$(".btnEditar").hide("fast");
    	$(".btnAgregar").show("slow");								
    }

    function edit(formulario,accion){				
    	
    	var nav= $.browser;
    	
    	if(nav.msie){

    		var form =  document.getElementById(formulario);
    		form.action=accion;
    		form.submit();
    	}
    	else{
    		
    		var form = document.forms[formulario];
    		form.action = accion;
    		form.submit;
    		
    	}
    																	
    }


    function convertDate(stringdate) 
    { 
        // Internet Explorer does not like dashes in dates when converting,  
        // so lets use a regular expression to get the year, month, and day  
        var DateRegex = /([^-]*)-([^-]*)-([^-]*)/; 
        var DateRegexResult = stringdate.match(DateRegex); 
        var DateResult; 
        var StringDateResult = ""; 
     	
        // try creating a new date in a format that both Firefox and Internet Explorer understand 
        try 
        { 
            DateResult = new Date(DateRegexResult[2]+"/"+DateRegexResult[3]+"/"+DateRegexResult[1]); 
        }  
        // if there is an error, catch it and try to set the date result using a simple conversion 
        catch(err)  
        {  
            DateResult = new Date(stringdate);  
        } 
     	
        var numCeros = "00";
        // format the date properly for viewing 
        //alert("dia " + DateResult.getDate() + " Mes " + DateResult.getMonth() + "Año "+ DateResult.getFullYear() + "tamaño dia " +numCeros.substring(0,numCeros.length-String(DateResult.getDate()).length) + String(DateResult.getDate()));
        
        StringDateResult = (numCeros.substring(0,numCeros.length-String(DateResult.getDate()).length) + String(DateResult.getDate()))+"/"+(numCeros.substring(0,numCeros.length-String(DateResult.getMonth()+1).length) + String(DateResult.getMonth()+1))+"/"+(DateResult.getFullYear()); 
     
        return StringDateResult; 
    } 






    function soloNumeros(evt){
    	
    	//asignamos el valor de la tecla a keynum
    	if(window.event){// IE
    	keynum = evt.keyCode;
    	}else{
    	keynum = evt.which;
    	}
    	//comprobamos si se encuentra en el rango
    	if(keynum>47 && keynum<58){
    	return true;
    	}else{
    	return false;
    	}
    	}
    	
    function soloMoneda(event) { 
    		if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) { 
    			event.preventDefault(); 
    			}
    		}


    function MoneyFormat(amount) { 
    	var val = parseFloat(amount); 
    	if (isNaN(val)) { return "0.00"; } 
    	if (val <= 0) { return "0.00"; } 
    	val += ""; 
    	// Next two lines remove anything beyond 2 decimal places 
    	if (val.indexOf('.') == -1) { return val+".00"; } 
    	else { val = val.substring(0,val.indexOf('.')+3); } 
    	val = (val == Math.floor(val)) ? val + '.00' : ((val*10 == 
    	Math.floor(val*10)) ? val + '0' : val); 
    	return val; 
    	} 
    	
    	
    function validateMail(idMail)
    {
    	//Creamos un objeto 
    	object=document.getElementById(idMail);
    	valueForm=object.value;

    	// Patron para el correo
    	var patron=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
    	if(valueForm.search(patron)==0)
    	{
    		//Mail correcto
    		object.style.color="#000";
    		return;
    	}
    	//Mail incorrecto
    	object.style.color="#f00";
    }


    function soloLetras(e){
    	 key = e.keyCode || e.which;
    	 tecla = String.fromCharCode(key).toLowerCase();
    	 letras = " áéíóúabcdefghijklmnñopqrstuvwxyz1234567890";
    	 especiales = [8,37,46,64];

    	 tecla_especial = false
    	 for(var i in especiales){
    	     if(key == especiales[i]){
    	  tecla_especial = true;
    	  break;
    	            } 
    	 }
    	 
    	        if(letras.indexOf(tecla)==-1 && !tecla_especial)
    	     return false;
    	     }
    	     
    	     
    	     
    function formateaFecha(name){
        //alert("------------------");
        var item = document.getElementById(name).value;
        var i;
        if(item != ""){
                       var date2 = "", mes="",dia="",anio="";
        var fechaC = null;
        var anioint = null;                              
                       for(i=0;i<item.toString().length;i++)
                       {
                       if(item.charAt(i)=='-'){
                                       fechaC = item.split("-");
                                       break;
                       }
                       if(item.charAt(i)=='/'){
                                       fechaC = item.split("/");
                                       break;
                       }                              
                       }
                       var anioC = fechaC[2].toString();             
    var mesC = fechaC[1].toString();
    var diaC = fechaC[0].toString();
    anioint = parseInt(anioC); 
    if (mesC.toString().length<2){
                           mes="0".concat(mesC);       
                        }else{
                                        mes=mesC;
                        }                                            
                        if (diaC.toString().length<2){
                           dia="0".concat(diaC);       
                        }else{
                                        dia = diaC;
                        }                             
                        if (anioC.toString().length==2 && anioint<30){
                                        anio="20".concat(anioC);                                                                                          
                        }else if(anioC.toString().length==2 && anioint>30){
                                       anio="19".concat(anioC); 
                        }
                        else{
                                        anio=anioC;
                        }
                        date2 = anio.toString() + "-" + mes.toString() + "-" +  dia.toString();  
                        //document.getElementById(name).value = date2; 
        }else{
                       date2 = "";
        }                              
                        return date2;
    }

    
    		function mun(idMunicipio,municipio){
				$("#idMunicipio").val(idMunicipio);
				$("#municipio").val(municipio);
			}
			
			
				
    	    function editForm(formulario,accion){				
    	    	
    	    	var nav= $.browser;
    	    	
    	    	if(nav.msie){

    	    		var form =  document.getElementById(formulario);
    	    		form.action=accion;
    	    		form.submit();
    	    	}
    	    	else{
    	    		
    	    		var form = document.forms[formulario];
    	    		form.action = accion;
    	    		
    	    		
    	    	}
    	    																	
    	    }
		</script>
</head>

<body>
    	<font class="divTextoEncabezado">Registro de Empleados</font>
     
        <form:form method="post" id="ingresoEmp" action="addPersonal" commandName="sferhEmpleado" >
        <form:hidden path="idEmpleado" id="idEmpleado"/>
		<div id="fieldWrapper">
			<div class="step" id="first">
				<span class="font_normal_07em_black">Paso 1 - Ingreso de Datos Personales</span><br />
				        	
        			<form:label path="nombreCompleto"  class="text0">Nombre</form:label>	<br />
        		
        			<form:input path="nombreCompleto" onkeypress="return soloLetras(event)" id="nombreCompleto"  class="required inputTextFacturaAgregar" /><br /><br />	
        		
        			<form:label path="catEstadocivil.idEstadoCivil" class="text0">Estado Civil</form:label><br />
        			  <form:select path="catEstadocivil.idEstadoCivil" style="width:180px">
            		<form:options items="${listEstado}" itemValue="idEstadoCivil" itemLabel="estadoCivil" />
            		
            	</form:select><br /><br />
        		
        		  <form:label path="catGenero.idGenero" class="text0">Genero</form:label><br />
        		
        		<form:select path="catGenero.idGenero" id="idGenero" style="width:180px">
            		<form:options items="${listGenero}" itemValue="idGenero" itemLabel="genero"  />
            		
            	</form:select><br /><br />
        		
        		 <form:label path="catNacionalidad.idNacionalidad" class="text0">Nacionalidad</form:label><br />
        		
        		 <form:select path="catNacionalidad.idNacionalidad" id="idNacionalidad"  style="width:180px" >
            		<form:options items="${listNacionalidad}" itemValue="idNacionalidad" itemLabel="nacionalidad" />
            		
            	</form:select><br /><br />
        		
        		 <form:label path="lugarNacimiento" class="text0">Lugar de Nacimiento</form:label><br />
        		
        		<form:input onkeypress="return soloLetras(event)" path="lugarNacimiento" id="lugarNacimiento" class="required inputTextFacturaAgregar"/><br /><br />    
        		
        		  <form:label path="fechaNacimiento" class="text0">Fecha de Nacimiento</form:label><br />
        		
        		
        			<form:input readonly="true" path="fechaNac" id="cal-field-1" size="17" maxlength="10" class="required date inputCalendario0" />
			<input type=image src="../resources/img/calendario.png" width="16" height="16" id="cal-button-1" class="inputCalendario"><br /><br />
			<script type="text/javascript">
						Calendar.setup({
						  inputField    : "cal-field-1",
						  button        : "cal-button-1",
						  align         : "Br"
						});
			</script>
        		 <form:label path="catEstadoEmpleado.idEstadoEmpleado" class="text0">Estado Empleado</form:label><br />
        		 <form:select path="catEstadoEmpleado.idEstadoEmpleado" id="idEstadoEmpleado" style="width:180px"  ><br /><br />
            		<form:options items="${listEstadoEmp}" itemValue="idEstadoEmpleado" itemLabel="estadoEmpleado" />
            		
            	</form:select>
			</div>
			<div class="step" id="second">
				<span class="font_normal_07em_black">Paso 2 - Ingreso de Informacion de Contacto</span><br />
				 
            		<form:label path="correo" class="text0" >Correo Electronico</form:label><br />
            	
            		<form:input  path="correo" id="correo" onkeypress="return soloLetras(event)" class="email inputTextFacturaAgregar"/><br /><br />
            	
            		<form:label path="telefonos"   class="text0">Telefono Contacto</form:label><br />
            	
            		<form:input onkeypress="return soloNumeros(event)"   maxlength="8" class="required inputTextFacturaAgregar" path="telefonos" id="telefonos"/><br />
            	
			</div>
			<div class="step" id="third">
				<span class="font_normal_07em_black">Paso 3 - Ingreso de Informacion de Lugar de Recidencia</span><br />
				
            		<form:label path="direccion" id="direccion" class="text0">Direccion</form:label><br />
            	
            		<form:input path="direccion" id="direccion" onkeypress="return soloLetras(event)" class="required inputTextFacturaAgregar"/><br /><br />
            	
            	
            		<form:label path="catMunicipio.municipio"  class="text0">Municipio</form:label><br />
            	
            		<form:hidden path="catMunicipio.idMunicipio" id="idMunicipio" />
            		<form:input path="catMunicipio.municipio" id="municipio" readonly="true" class="required inputTextFacturaAgregar"/><input type="buttom" id="buscar" name="buscar" class="inputBoton botonLupa" onclick="TINY.box.show({iframe:'<%request.getContextPath();%>findMunicipio',boxid:'frameless',width:600,height:350,fixed:true,maskid:'bluemask',maskopacity:100})"><br />
            	
			</div>
			<div class="step" id="fourth">
				<span class="font_normal_07em_black">Paso 4 - Ingreso de Informacion de Documentos</span><br />
				 
            		<form:label path="nr" class="text0">NR</form:label><br />
            	
            		<form:input path="nr" onkeypress="return soloLetras(event)" maxlength="5" id="nr" class="required inputTextFacturaAgregar"/><br /><br />
            	
            		<form:label path="duiNumero" class="text0">Numero de DUI</form:label><br />
            	
            		<form:input path="duiNumero" maxlength="11" onkeypress="return soloNumeros(event)" id="duiNumero" class="required inputTextFacturaAgregar"/><br /><br />
            	
            		<form:label path="nitNumero" class="text0">Numero de NIT</form:label><br />
            	
            		<form:input path="nitNumero" maxlength="14" onkeypress="return soloNumeros(event)" id="nitNumero"  class="required inputTextFacturaAgregar"/><br /><br />
            		<form:label path="nupNumero" class="text0">Numero de NUP</form:label><br />
            		<form:input path="nupNumero" maxlength="12" onkeypress="return soloNumeros(event)" id="nupNumero" class="required inputTextFacturaAgregar"/><br /><br />
            		<form:label path="isssNumero" class="text0">Numero de ISSS</form:label><br />
            		<form:input path="isssNumero" maxlength="9" onkeypress="return soloNumeros(event)" id="isssNumero" class="required inputTextFacturaAgregar"/><br /><br />
            	
			</div>
			
		</div>
		<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
       </form:form>
    	   <div id="status" class="divDetalledelProductoPedido"></div>
    	   	
    	   			 
        </body>
</html>
